<template>
  <div class="state_box">
    <div id="state"></div>
    <img class="state_bg" src="https://big-file.oss-cn-hangzhou-zwynet-d01-a.internet.cloud.zj.gov.cn/img/2021/202105/20210521/1621584731049.png" alt="">
  </div>
</template>

<script>
export default {
  name:"State",
  mounted(){
    this.createEcharts();
  },
  methods:{
    createEcharts(){
      let myChart = this.$echarts.init(document.getElementById('state'),'dark');
      myChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        xAxis: {
          data: ['中华优秀传统文化','革命文化','社会主义先进文化'],
          axisLabel: {
            inside: false,
            textStyle: {
                color:'#fff',
                fontSize:'11',
                itemSize:''
            }
          },
        },
        yAxis: {
          splitLine:{
            show:false
          }
        },
        series: [{
          name:"数量",
          data: [28195, 1661, 1173],
          type: 'bar',
          barWidth : 55,//柱图宽度
          itemStyle:{
            normal: {
              barBorderRadius:[20, 20, 0, 0],
              color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
								offset: 0,
								color: "rgba(46,119,187,0.1)" // 0% 处的颜色
							}, {
								offset: 0.2,
								color: "#2e77bb" // 60% 处的颜色
							}, {
								offset: 1,
								color: "#39d6c4" // 100% 处的颜色
							}], false)
            }
          }
        }],
        backgroundColor:'' //设置无背景色
      });
    }
  }
}
</script>

<style>
.state_box{
  position: relative;
  height: 100%;
}
.state_bg{
  position: absolute;
  top: 0;
}
#state{
  height: 100%;
}
</style>
